(function(){
    let titleid;
    let html
    function render(data = []) {
        html = "";//储存结构
        let category="";
        let title;
        let num=0;
        data.forEach(item => {
            
            titleid=item.brandTitleId;
            title=item.brandTitle;
            // console.log(title.id);
            $.ajax({
                url: 'http://chst.vip:1234/api/getbrand',
                data:{
                    brandtitleid:titleid
                },
                
            }).then(res=>{
                // 获取具体类别名称
                category=renderCategory(res.result);
                // console.log(res);
                html += `
                <li>
                    <div class="title" titleid="${item.brandTitleId}" index="1">
                        <b>${item.brandTitle}</b>
                        <b>▼</b>
                    </div>
                    <ul class="categoryList clear_float">
                     ${category}
                    </ul>
                    
                </li>
                ` 
                
                num++;
                
            })
            .then(
                
                function(){             
                    if(num===data.length){
                        // 当惠htlm全部添加完成再渲染到页面
                        $(".ul_contain").html(html)
                    }
                }
            )
        
        })
        
        
        
    }
    function renderCategory(data = []) {
        let html = "";//储存结构
        // console.log(data);
        data.forEach((item,index) => {
            
            console.log(item,index);
            
            html += `
            <li categoryid="${item.brandId}">
               <a href="brand.html?title=${item.brandName}&categoryid=${item.brandId}"> 
               <i>${index}</i>${item.brandName}
               <div class="sel">
               ${item.brandInfo}
                </div>
               
               </a>
            </li>
            `
            // 
        })
        return html
        
    }

    $.ajax({ //这玩意是异步的
        url: "http://chst.vip:1234/api/getbrandtitle"
    })
        .then(res => {
            console.log(res);
            render(res.result) //同步的
            
        })
        .then(function(){
           
            $("main").on("click",".title",function(e){
                
            //    console.log($(this).next().height());
            
               let titles=document.getElementsByClassName("title");
               let categoryLists = document.getElementsByClassName("categoryList");
               
               [...titles].forEach((item,index)=>{
                   item.index =index;
                   
                  
               });
            //    去除掉除了点击的类别  其他类别收起  若不去处则先收缩然后再打开
               [...categoryLists].filter((item, index) => index != this.index).forEach(category => {
                    $(category).animate({
                        height: 0
                    }, 100, 'linear')
                })
                // 通过获取类别数量计算容器高度
               let height=$(categoryLists[this.index]).children().length*2.133333+"rem";
            //    console.log(height);
               let h=$(categoryLists[this.index]).height()
            //    控制开关
            if(h==0){
                $(categoryLists[this.index]).animate({height:height}, 200, 'linear')
            }else{
                $(categoryLists[this.index]).animate({height:0}, 200, 'linear')
            }
            
               
            })
            
        
        })
    
    
}())
